<template>
  <div>
    <el-popover
      placement="bottom-start"
      :width="700"
      trigger="click"
    >
      <template #reference>
        <div class="sty">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
            readonly
            editable="false"
            style="width: 300px; margin: 20px"
          />
        </div>
      </template>

      <p>Are you OK?</p>
      <DataPicker :datePicker="dateRange" />
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from "vue";
import DataPicker from "./w25.vue";
const dateRange = ref<[string, string] | null>(null);

const setDateRange = (val: [string, string] | null) => {
  dateRange.value = val;
};
provide("setDateRange", setDateRange);

//重置
const resetDateRange = () => {
  dateRange.value = null;
};
provide("resetDateRange", resetDateRange);
onMounted(() => {});
</script>

<style scoped lang="scss">
.sty {
  :deep(.el-date-editor--daterange) {
    margin: 0 !important;
  }
}
</style>
